<template>
  <div class="wrap">
    <el-form label-width="100px" ref="infoForm" :rules="rules" :model="currentForm">
      <el-form-item label="昵称" prop="account">
        <el-input style="width: 300px" v-model="currentForm.account"></el-input>
        <div class="tips">
          可用作登录时的用户名
        </div>
      </el-form-item>
      <el-form-item label="头像" prop="avatar">
        <div><i class="el-icon-warning-outline"></i>仅支持JPG、JPEG、PNG等图片格式，文件小于1M</div>
        <div class="avatar-box">
          <img :src="currentForm.avatar" alt="" width="120" height="120" class="avatar">
          <el-upload
            class="avatar-uploader"
            :action="uploadUrl"
            :show-file-list="false"
            :on-success="uploadImageSuccess"
            :headers="uploadHeader"
          >
            <div class="avatar-hover">
              <div class="hover-text">
                <i class="el-icon-upload" style="font-size: 32px"></i>
                上传新图片
              </div>
            </div>
          </el-upload>
        </div>
      </el-form-item>
      <el-form-item>
        <el-button
          type="info"
          round
          :class="[isChange() ? 'button-save' : '']"
          :disabled="!isChange()"
          @click="submitForm"
        >保存</el-button>
      </el-form-item>
    </el-form>
  </div>

</template>

<script>
import {getToken} from "@/utils/auth";
import {deepCopy} from "@/utils";
import request from "@/utils/request";

export default {
  name: "info",
  data(){
    const checkAccount = (rule, value, callback) => {
      request({
        url: '/business/checkAccount',
        method: 'get',
        params:{
          account : value,
        },
        handleError: true,
      }).then(res=>{
        if(res.error !== 0){
          callback(new Error(res.message));
        }else{
          callback();
        }
      })
    };

    return {
      uploadUrl: process.env.VUE_APP_BASE_API + '/image',
      uploadHeader: {
        Authorization: 'Bearer ' + getToken(),
      },
      originForm:{
        account : '',
        avatar : '',
      },
      currentForm:{
        account : '',
        avatar : '',
      },
      rules : {
        account: [
          { required: true,message: "请填写用户名"  ,trigger: 'blur' },
          { min: 3, max:20, message: "用户名至少3位,最多20位"  ,trigger: 'blur' },
          { pattern: /^[\u4e00-\u9fa5a-zA-Z0-9_]+$/ , message: '用户名只能输入英文数字中文,特殊符号只能输入下划线"_"',trigger: 'blur' },
          { validator:checkAccount,trigger: 'blur' },

        ],
      },
    }
  },
  created() {
    this.getData()
  },
  methods:{
    getData(){
      this.originForm.account = this.$store.getters.name
      this.originForm.avatar = this.$store.getters.avatar
      this.currentForm = deepCopy(this.originForm);
    },
    // 上传处理
    uploadImageSuccess(res, file) {
      if (res.error === 0) {
        this.currentForm.avatar = res.info.imageUrl;
      } else {
        this.$errorMessage(res.message);
      }
    },
    // 比较两个对象是否有变更的值
    isChange(){
      return JSON.stringify(this.currentForm) !== JSON.stringify(this.originForm)
    },
    submitForm(){
      this.$refs.infoForm.validate(valid => {
        if (valid) {
          this.loading = true
          const params = deepCopy(this.currentForm)
          request({
            url: '/business/update',
            method: 'put',
            data: params,
            handlerError: true,
          })
            .then(res=>{
              this.loading = false
              if(res.error === 0){
                this.$successMessage('修改成功')
                setTimeout(()=>{
                  this.$router.go(0)
                },500)
              }else{
                this.$errorMessage(res.message)
              }
            })
        }
      })
    }
  },
}
</script>

<style scoped lang="scss">
.wrap {
  padding: 30px 30px;
  .avatar{
    object-fit: cover;
    border-radius: 50%;
  }
  .avatar-box{
    position: relative;
    .avatar-hover{
      display: none;
      width: 120px;
      height: 120px;
      background: rgba(0,0,0,.5);
      color: #ffffff;
      text-align: center;
      position: absolute;
      top: 0;
      border-radius: 50%;
      .hover-text{
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 25%;
        left: 20%;
      }
    }
  }
  .avatar-box:hover .avatar-hover{
    display: block;
  }
  .button-save{
    color: #ffffff;
    background: #ff7d0a;
    border: #ff7d0a;
  }
  .tips{
    font-weight: 400;
    font-style: normal;
    font-size: 12px;
    color: #7f7f7f;
  }
}

</style>
